<template>
  <div class="px-8 py-4">
    <el-tabs v-model="activeName">
      <el-tab-pane label="首页" name="1" />
      <el-tab-pane label="导航" name="2" />
      <!-- <el-tab-pane label="设置" name="3" /> -->
      <el-tab-pane label="预览" name="4" />
    </el-tabs>
    <home v-if="activeName === '1'" />
    <navigation v-if="activeName === '2'" />
    <setting v-if="activeName === '3'" />
  </div>
</template>

<script setup>
import { ref, nextTick, watch } from "vue";
import home from "./components/home.vue";
import navigation from "./components/navigation.vue";
import setting from "./components/setting.vue";
import { getBaseUrl } from "@/api/request";

const activeName = ref("1");

watch(
  () => activeName.value,
  (newValue, lastValue) => {
    if (newValue === "4") {
      preview();
      nextTick(() => {
        activeName.value = lastValue;
      });
    }
  }
);

function preview() {
  window.open(getBaseUrl() + "index.html", "_blank");
}
</script>

<style scoped></style>
